<template>
  <div class="app-role">
    <h3>订单列表</h3>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleChange">
      <el-tab-pane label="全部" name=""></el-tab-pane>
      <el-tab-pane :label="statusOption['1']" name="1"></el-tab-pane>
      <el-tab-pane :label="statusOption['2']" name="2"></el-tab-pane>
      <el-tab-pane :label="statusOption['3']" name="3"></el-tab-pane>
      <el-tab-pane :label="statusOption['4']" name="4"></el-tab-pane>
      <el-tab-pane :label="statusOption['5']" name="5"></el-tab-pane>
      <el-tab-pane :label="statusOption['6']" name="6"></el-tab-pane>
    </el-tabs>
   <Query
     :items="queryColumns"
     :initial-params="queryParams"
     @query="handleQuery"
     labelWidth="100px"
   />
   <Table
     :table-columns="tableColumns"
     :table-loading="tableLoading"
     :table-data="tableData"
     :total="total"
     isExpand
     @pagination="handlePagination"
     :tree-props="{ children: 'children', hasChildren:'hasChildren',icon:'Plus' }"
   >
     <template #headImg="{row}">
        <div class="productName_box">
          <img v-if="row.headImg" class="productName_img" :src="row.headImg" />
          <span v-else>-</span>
        </div>
     </template>
     <template #status="{row}">
      <div>
        <span class="status-circle" :class="{
          yellowStatus:row.status ==1 || row.status ==2|| row.status ==3,
          greenStatus:row.status==4,
          grayStatus:row.status==5 || row.status==6,
          }"></span>
        <span>{{ statusOption[row.status] }}</span>
      </div>
     </template>
     <template #opt="scope">
       <el-button v-if="scope.row.status==2" type="primary" link @click="handleAdd(scope.row)">发货</el-button>
       <el-button type="primary" link @click="handleDetail(scope.row)">查看详情</el-button>
     </template>
   </Table>
   <el-dialog v-model="showDialog" title="发货" width="600">
      <el-row>
        <el-col :span="24">
          <div style="padding: 10px 0;" v-if="detailData.addressInfo">
            <span>收货信息：</span>
            <span style="margin-right: 12px;">{{ detailData.addressInfo.name }}</span>
            <span style="margin-right: 12px;">{{ detailData.addressInfo.phone }}</span>
            <span>{{ detailData.addressInfo.province }} {{ detailData.addressInfo.city }} {{ detailData.addressInfo.district }} {{ detailData.addressInfo.detail }}</span>
          </div>
        </el-col>
        <el-col :span="24">
          <el-form ref="refForm" :model="formData" :rules="formRules" size="default">
            
            <el-form-item label="快递公司" label-width="100px" required>
              <!-- placeholder="可多选" multiple :multiple-limit="10" -->
              <el-select clearable filterable v-model="formData.kdCode" placeholder="请选择" >
                <el-option v-for="(item,i) in allLogisticList" :key="'allLogisticList_'+i" :label="item.name" :value="item.kdCode" />
              </el-select>
            </el-form-item>
            <el-form-item label="物流单号" label-width="100px" required>
              <el-input v-model="formData.logNo" :maxlength="20" show-word-limit placeholder="请输入物流单号" autocomplete="off" />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog = false" size="default">取消</el-button>
          <el-button type="primary" @click="handleSubmit" size="default">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="productTemeplate">
import Table from "@/components/Table/index.vue";
import Query from "@/components/Query/index.vue";
import DialogForm from '@/components/FormDialog/index.vue'
import { formatDate } from '@/utils'
import { getOrderList,getOrderDetail,logisticList,orderSend } from "@/api/order";

const { proxy } = getCurrentInstance()
const tableData = ref([])
const tableData2 = ref([])
const total = ref(0)
const total2 = ref(0)
const tableLoading = ref(true)
const tableLoading2 = ref(true)
const dialogTitle = ref('')
const loading = ref(false)
const refForm = ref(null)
const showDialog = ref(false)
const router = useRouter();
const skuList = ref([])
const statusOption = reactive({
  '1':'待付款',
  '2':'待发货',
  '3':'待收货',
  '4':'待评价',
  '5':'已完成',
  '6':'已取消',
})
const activeName = ref('')
const formData = ref({
  kdCode:'',
  logoNo:'',
})
const formRules = ref({
  kdCode: [
    { required: true, message: '请选择物流公司', trigger: 'blur' },
  ],
  logoNo: [
    { required: true, message: '请输入快递单号', trigger: 'blur' },
  ],
})
const detailId = ref(null)
const detailData = ref({})

const data = reactive({
 tableColumns: [
   { label: "用户头像", prop: "headImg",slot: 'headImg',width:80},
   { label: "用户昵称", prop: "nickname" },
   { label: "订单号", prop: "orderNo",width:120 },
   { label: "收货人", prop: "name" },
   { label: "配送地址", prop: "showAddress" },
  //  { label: "关联商城会员", prop: "skuNum",width:140 },
  //  { label: "分享赚详情", prop: "skuNum", align:'center', width:260, children:[
  //   { label: "总返利金额", prop: "skuNum",width:100},
  //   { label: "一层返利金额", prop: "skuNum",width:100 },
  //   { label: "二层返利金额", prop: "skuNum",width:100 },
  //  ]},
   { label: "订单金额", prop: "orderAmount" },
   { label: "订单状态", prop: "status",slot: 'status' },
   { label: "创建时间", prop: "gmtCreate",width:180},
   { label: "操作", fixed:'right', prop: "opt", slot: 'opt',width:120},
 ],
 queryColumns: [
 { label: "时间范围", prop: "overTime", type: 'datetime',attrs: { type: 'datetimerange',  endPlaceholder: '请选择', startPlaceholder: '请选择', valueFormat: 'YYYY-MM-DD HH:mm:ss', format: 'YYYY-MM-DD HH:mm:ss'},width:180},
  { label: "", prop: "search", type: 'input', attrs: {placeholder:'综合搜索-订单号/商品名称/规格全称'}},
 ],
 pageParams: {
  current: 1,
  size: 10
 },
 queryParams: {},
 formItems: [

 ]
})
const allLogisticList = ref([])// 物流公司
const { tableColumns, queryColumns, pageParams, queryParams, formItems } = toRefs(data)
const handleChange = (tab, event) => {
  queryParams.value.current = 1
  console.log(tab, event)
  getList()
}
/** 获取列表数据 */
const getList = () => {
  tableLoading.value = true
  let overTime = queryParams.value.overTime || []
  const data  = {
    search:queryParams.value.search,
    ...pageParams.value,
    beginTime:overTime[0]&&formatDate(overTime[0]),
    endTime:overTime[1]&&formatDate(overTime[1]),
    status:activeName.value,
  }
  getOrderList(data)
  .then(res => {
    let list = res.data.records || []
     tableData.value = list
     total.value = res.data.total
  })
  .finally(() => {
     tableLoading.value = false
  })
}

getList()

/** 搜索按钮操作 */
const handleQuery = (val) => {
 queryParams.value = val
 getList()
}

const getDetail = ()=>{
  getOrderDetail({ id:detailId.value }).then(res => {
    let data =res.data || {}
    detailData.value = data
    console.log(11,detailData)
  })
}
/** 打开发货弹窗 */
const handleAdd = (row) => {
  dialogTitle.value = '发货'
  formData.value = {
    kdCode:'',
    logoNo:'',
  }
  detailId.value = row.id
  getDetail()
  getLogisticList()
  showDialog.value = true
}

/** 调整详情弹窗 */
const handleDetail = (row) => {
  router.push({
    path:'/orderMgmt/order/detail',
    query:{
      id:row.id,
    }
  })
}
/** 获取列表数据 */
const getLogisticList = () => {
  tableLoading2.value = true
  logisticList({})
  .then(res => {
    allLogisticList.value = res.data || []
  })
  .finally(() => {
     tableLoading2.value = false
  })
}

const handlePagination = (val) => {
 pageParams.value = val
 getList()
}

const handleSubmit = ()=>{
  refForm.value.validate(valid => {
    if (!valid) return
    let params = {
      ...formData.value,
      id:detailId.value,
    }
    console.log(11,params)
    orderSend(params).then(res=>{
      showDialog.value = false
      proxy.$modal.msgSuccess("发货成功")
      pageParams.value.current = 1
      getList()
    })
  })
}
</script>

<style lang="scss" scoped>
.productName_box{
  display: flex;
  align-items: center;
  .productName_img{
    width: 44px;
    height: 44px;
    object-fit: cover;
    margin-right: 8px;
  }
  span{

  }
}
.app-role {
 padding: 8px
}
.product_tem_wrap{
  display: flex;
  width: 100%;
  max-height: 400px;
  overflow: auto;
  flex-wrap: wrap;
  padding: 20px 0;
  padding-left:20px;
}
.product_tem_box{
  border: 1px solid #ddd;
  border-radius: 2px;
  cursor: pointer;
  height: 90px;
  margin-bottom: 20px;
  margin-right: 3%;
  padding: 10px;
  width: 30%;
  display: flex;
  .product_tem_img{
    width: 68px;
    height: 68px;
    margin-right: 8px;
    img{
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  .product_tem_name{
    flex: 1;
  }
  .product_tem_name_text{
    height: 40px;
    line-height: 20px;
    margin-bottom: 6px;
    max-width: 150px;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal !important;
    word-break: break-all;
  }
  .product_tem_typeName{
    color: #c4c4c3;
  }
}
.product_tem_box:hover{
  border-color: #4a89f0;
}

:deep(.sku-img-wrap) {
  cursor: pointer;
  .el-upload--picture-card,.el-upload-list--picture-card .el-upload-list__item-actions,.el-upload-list--picture-card .el-upload-list__item{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
  }
  img{
    width: 44px;
    height: 44px;
    object-fit: contain;
    cursor: pointer;
  }
}
// 规格信息
.sku-img-wrap {

}
.sku_item_info{
  flex: 1;
  margin-left: 8px;
  .sku_item_name{
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    white-space: normal !important;
    word-break: break-all;
  }
  .sku_item_type{
    color: #aaa;
  }
}
// sku详情弹窗
.skuItemInfo_box{
  width: 300px;
  margin: 0 auto;
  color: #666;
  font-size: 14px;
  .skuItemInfo_name{
    color: #000;
    font-size: 16px;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .skuItemInfo_wholeName{
    
    margin-top: 10px;
  }
  .skuItemInfo_barcode{
    margin-top: 10px;
  }
  .skuItemInfo_img{
    margin-top: 10px;
    img{
      width: 300px;
      height: 300px;
      object-fit: contain;
    }
  }
}
</style>